<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" href="/css/base.css">

    <script type="text/javascript" src="../../js/jquery/jquery-1.9.1.js"></script>
    <script src="../../lib/layer/layer.js?20201106"></script>
    <script src="../../js/news/page.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <title>管理图书</title>
    <style>
        html,body{
            width:100%;
            height:100%
        }
        .title{
            height:70px;
            line-height:70px;
        }
        .title span{
            font-size: 22px;
            color: #494d59;
        }
        .title img{
            vertical-align: middle;
            padding-left:20px;
            float:left;
            margin:23px 5px 0px 0px;
        }
        .table{
            width:98%;
            margin:0 auto;
        }
        table{
            width:100%;
        }
        table th{
            font-size: 15px;
            color: #2F5C8F;
            font-weight: bold;
            text-align:left;
        }
        table th,tr{
            padding:10px;
        }
        .foot{
            text-align: center;
            height: 70px;
            line-height: 70px;
        }
        table a{
            text-decoration: none;
            color:#207bd6;
            padding-right:5px;
        }

        .M-box3 .active{
            margin: 0px 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            background: #2b7fe0;
            font-size: 12px;
            border: 1px solid #2b7fe0;
            color:#fff;
            text-align:center;
            display: inline-block;
        }
        .M-box3 a{
            margin: 0 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            font-size: 12px;
            display: inline-block;
            text-align:center;
            background: #fff;
            border: 1px solid #ebebeb;
            color: #bdbdbd;
            text-decoration: none;
        }

        .queryCond input{
            float: none;
            width: 160px;
            height: 24px;
            border-radius: 5px;
            padding-left: 5px;
            border: #ebebeb 1px solid;
        }
        .queryCond select{
            margin-left: 6px;
            width: 150px;
            height: 30px;
            border: #ebebeb 1px solid;
            border-radius: 5px;
            padding: 0 5px;
        }
        .btnSpan {
            display: inline-block;
            width: 60px;
            height: 28px;
            background-color: #2f80d1;
            font-size: 14px;
            cursor: pointer;
            color: #fff;
            border-radius: 5px;
            line-height: 28px;
            text-align: center;
            margin-top: -29px;
            margin-left: 45px;
        }
    </style>
</head>
<body style="overflow:scroll;overflow-y: auto;overflow-x:hidden;">
<div>
    <div class="title">
        <img src="../../img/book/manage.png" alt="">
        <span>视频监控管理</span>
    </div>
    <div style="margin-top: -49px;margin-left:220px;height:50px;width: 97%;" class="queryCond">
           <span>设备名称：</span><input name="deviceName" id="deviceName">
           <span style="padding-left: 18px;">所属社区：</span><select name="dept" id="dept"></select>
           <span style="padding-left: 18px;">状态：</span>
                <select  name="status" id="status">
                    <option value="">请选择</option>
                    <option value="2">启用</option>
                    <option value="1">禁用</option>
                </select>
           <span class="btnSpan" id="query" onclick="list()">查询</span>
    </div>
    <div class="table">
        <table>
            <thead>
                <th style="width:10%;text-align:center;">设备编号</th>
                <th style="width:20%;text-align:center;">设备名称</th>
                <th style="width:10%;text-align:center;">所属社区</th>
                <th style="width:10%;text-align:center;">状态</th>
                <th style="width:20%;text-align:center;">地址</th>
                <th style="width:30%;text-align:center;">操作</th>
            </thead>
            <tbody class="list">

            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    $(function(){
        list();
        getType();
//        点击单条删除
        $('.list').on('click','.remove',function(){
            var id=$(this).parents('tr').attr('id');
            layer.confirm(' <fmt:message  code="workflow.th.que"/>', {
                btn: [' <fmt:message  code="global.lang.ok"/>', ' <fmt:message  code="depatement.th.quxiao"/>'], //按钮
                title: " <fmt:message code="common.th.prompt" />"
            },function(){
                $.ajax({
                    url:'/video/delDeviceById',
                    type:'post',
                    data:{id:id},
                    dataType:'json',
                    success:function(res){
                        if(res.flag){
                            layer.msg(' <fmt:message  code="workflow.th.delsucess"/>', {icon: 6});
                            list();
                        }else{
                            layer.msg(' 删除失败', {icon: 2});
                        }
                    }
                })
            })
        })
//        点击编辑
        $('.list').on('click','.edit',function(){
            var id=$(this).parents('tr').attr('id');
            self.parent.document.getElementById('iframe').src='/video/editVideo?id='+id;
        })

    })

    //        获得社区
    function getType(){
        $.ajax({
            url:'/gridInfo/gridSettingsTree',
            type:'get',
            data:{
                deptId:0,
                typeId:0
            },
            dataType:'json',
            success:function(res){
                var data=res.obj;
                var str="<option value=''>请选择</option>";
                for(var i=0;i<data.length;i++){
                    str += '<option value="'+data[i].gridId+'">'+data[i].gridName+'</option>'
                }
                $('#dept').html(str)
            }
        })
    }


    function list() {
        $.ajax({
            url:'/video/selDeviceByCond',
            type:'get',
            data:{
                deviceName:$("#deviceName").val(),
                dept:$("#dept").val(),
                status:$("#status").val()
            },
            dataType:'json',
            success:function(reg){
                var datas=reg.obj;
                var str="";
                for(var i=0;i<datas.length;i++){
                    str += '<tr id="'+datas[i].id+'">' +
                        '                    <td style="width:10%;text-align:center;overflow: hidden;text-overflow: ellipsis; white-space: nowrap; " title="'+datas[i].deviceNo+'"><span>'+datas[i].deviceNo+'</span></td>' +
                        '                    <td style="width:20%;text-align:center;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;" title="'+datas[i].deviceName+'">'+datas[i].deviceName+'</td>' +
                        '                    <td style="width:10%;text-align:center; ">'+datas[i].deptName+'</td>' ;
                    if(datas[i].status==1){
                        str+= '                    <td style="width:10%;text-align:center; ">禁用</td>' ;
                    }else{
                        str+= '                    <td style="width:10%;text-align:center; ">启用</td>' ;
                    }
                    str+=   '                    <td style="width:20%;text-align:center;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;" title="'+datas[i].address+'">'+datas[i].address+'</td>' ;

                    str+='                    <td style="width:30%;text-align:center;">' ;
                       if(datas[i].status==1){
                         str+= '                        <a href="javascript:;" class="editStatus" onclick="editStatus('+datas[i].id+',2)">启用</a>' ;
                       }else{
                           str+='                        <a href="javascript:;" class="editStatus" onclick="editStatus('+datas[i].id+',1)">禁用</a>' ;
                       }
                    str+= '                        <a href="javascript:;" class="edit">编辑</a>' +
                        '                        <a href="javascript:;" class="remove">删除</a>' +
                        '                        <a href="javascript:;" class="detail" onclick="detail('+datas[i].id+')">详情</a>' +
                        '                    </td>' +
                        '                </tr>'
                }
                $('.list').html(str);
            }
        })
    }

    function  detail(id){
        //点击会议名称显示会议详情
        $.ajax({
            url: '/video/selDeviceById',
            type: 'get',
            dataType: 'json',
            data: {
                id: id
            },
            success: function (obj) {
                var data = obj.object;
                var str= '<div class="table"><table style="margin:auto;">' +
                    '<tr><td width="30%"><span class="span_td">设备名称：</span></td><td><span>' + data.deviceName + '</span></td><tr>' +
                    '<tr><td width="30%"><span class="span_td">设备编号：</span></td><td><span>' + data.deviceNo + '</span></td><tr>' +
                    '<tr><td width="30%"><span class="span_td">设备型号：</span></td><td><span>' + data.deviceModel + '</span></td><tr>' +
                    '<tr><td width="30%"><span class="span_td">设备序列号：</span></td><td><span>' + data.deviceNum + '</span></td><tr>' +
                    '<tr><td width="30%"><span class="span_td">设备端口：</span></td><td><span>' + data.devicePort + '</span></td><tr>' +
                    '<tr><td width="30%"><span class="span_td">描述：</span></td><td><span>' + data.desc + '</span></td><tr>' +
                    '<tr><td><span class="span_td">gps地址：</span></td><td><span>' + data.gpsAddress + '</span></td><tr>' +
                    '<tr><td><span class="span_td">地址：</span></td><td><span>' + data.address + '</span></td><tr>' +
                    '<tr><td><span class="span_td">IP地址：</span></td><td><span>' + data.ip + '</span></td><tr>' +
                    '<tr><td><span class="span_td">ip端口：</span></td><td><span>' + data.ipAport + '</span></td><tr>' +
                    '<tr><td><span class="span_td">用户名：</span></td><td><span>' + data.userName + '</span></td><tr>' +
                    '<tr><td><span class="span_td">密码：</span></td><td><span>' + data.password + '</td><tr>';
                if (data.streamType == 1) {
                    str += '<tr><td><span class="span_td">码流类型：</span></td><td>主码流</td><tr>';
                } else if (data.streamType == 2) {
                    str += '<tr><td><span class="span_td">码流类型：</span></td><td>子码流</td><tr>';
                } else if (data.streamType == 3) {
                    str += '<tr><td><span class="span_td">码流类型：</span></td><td>第三码流</td><tr>';
                } else if (data.streamType == 4) {
                    str += '<tr><td><span class="span_td">码流类型：</span></td><td>转码码流</td><tr>';
                }
                if(data.status==2){
                    str += '<tr><td><span class="span_td">状态：</span></td><td>启用</td><tr>';
                }else{
                    str += '<tr><td><span class="span_td">状态：</span></td><td>禁用</td><tr>';
                }
                str += '<tr><td><span class="span_td">所属社区：</span></td><td><span>' + data.deptName + '</td><tr>' +
                    '</table></div>';

                layer.open({
                    type: 1,
                    title: ['视频监控详情', 'background-color:#2b7fe0;color:#fff;'],
                    area: ['600px', '500px'],
                    offset: ['30px', '400px'],
                    shadeClose: true, //点击遮罩关闭
                    btn: ['<fmt:message code="global.lang.close" />'],
                    content: str,
                })
            }
        })
    }

    function editStatus(id,status) {
        $.ajax({
            url: '/video/upVideoByStatus',
            type: 'get',
            dataType: 'json',
            data: {
                id: id,
                status: status
            },
            success: function (obj) {
                if(obj.flag){
                    layer.msg('修改成功', {icon: 6});
                    list();
                }else{
                    layer.msg('修改失败', {icon: 2});
                }
            }
        })
    }
</script>
</html>
